<template>
	<view class="bottom">
		<view class="bottom-content" v-if="!isShow">
			<view class="b-left">
				<view class="r-item" @click="bindForwarding">
					<icon class="icon-fx"></icon>
					<text>分享</text>
				</view>
				<view class="r-item">
					<icon class="icon-kf"></icon>
					<text>客服</text>
					<button
						v-if="type == 2"
						open-type="contact"
						class="ke_fu_img"
						:send-message-title="detail.list.name"
						:show-message-card="true"
						:send-message-path="`/pages/buyDetail/buyDetail?id=${detail.list.id}&type=${2}`"
						@click="chatClick"
					></button>
					<button
						v-if="type == 4"
						open-type="contact"
						class="ke_fu_img"
						:send-message-title="detail.list.name"
						:show-message-card="true"
						:send-message-path="`/pages/buyDetail/buyDetail?id=${detail.list.id}&type=${4}`"
						@click="chatClick"
					></button>
				</view>
				<view class="r-item" @click="isShow = true">
					<icon class="icon-ly"></icon>
					<text>留言</text>
				</view>
			</view>
			<view class="b-right">
				<template v-if="type == 2">
					<button class="buy-btn" @click="copyPhone(detail.list.phone, detail.list.wx)">
						{{ detail.list.phone.substring(0, 3) + '****' + detail.list.phone.substring(7, 11) }}
					</button>
				</template>
				<template v-else>
					<button class="buy-btn" @click="bindBack()" v-if="active === 'active'">点击免费拿</button>
					<button class="buy-btn" v-else @click="gotoHome">带它回家</button>
				</template>
			</view>
		</view>
		<view class="send-input" v-else>
			<input type="text" :focus="isShow" placeholder-class="placeholder" placeholder="留言板" v-model="input" confirm-type="send" @confirm="confirm" @blur="blur" />
		</view>
		<view class="black"></view>
	</view>
</template>

<script>
import { xWeinfo, payWeddding, chatClick } from '@/api/index.js';
const app = getApp();
export default {
	props: {
		detail: {
			type: Object,
			default: () => {}
		},
		active: {
			type: String,
			default: ''
		},
		type: {
			type: Number,
			default: 2
		}
	},
	data() {
		return {
			input: '',
			isShow: false
		};
	},
	methods: {
		// 带它回家
		gotoHome() {
			let url = '';
			if (this.detail.step == 0) {
				url = `/pagesBuyCat/earnestPay/earnestPay?goods_id=${this.detail.list.id}`;
			} else if (this.detail.step == 2) {
				url = `/pagesBuyCat/balancePay/balancePay?goods_id=${this.detail.list.id}`;
			} else if (this.detail.step == 3 || this.detail.step == 4) {
				url = `/pagesBuyCat/guarantee/guarantee?goods_id=${this.detail.list.id}`;
			} else if (this.detail.step == 9) {
				url = `/pagesBuyCat/consultCustomer/consultCustomer?goods_id=${this.detail.list.id}`;
			} else if (this.detail.step == 1) {
				url = `/pagesBuyCat/freeMedical/freeMedical?goods_id=${this.detail.list.id}`;
			}
			uni.navigateTo({
				url: url
			});
		},
		// 转发
		bindForwarding() {
			this.$emit('bindForwarding');
		},
		// 点赞
		bindLike() {
			this.$emit('like');
			console.log(this.detail);
		},
		// 评论
		confirm() {
			console.log(this.input);
			this.$emit('confirm', this.input);
		},
		// 评论失去焦点的时候
		blur() {
			this.isShow = false;
		},
		// 提交提交次数
		async xWeinfo() {
			const res = xWeinfo({
				openid: app.globalData.openid,
				goods_id: this.detail.list.id
			});
		},
		// 唤起微信支付
		async payWeddding() {
			payWeddding({
				openid: app.globalData.openid,
				cat_id: this.detail.list.cat_id
			}).then(res => {
				if (typeof res == 'string') {
					res = JSON.parse(res.trim());
				}
				uni.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success: () => {
						this.$emit('paySuccess');
						uni.navigateTo({
							url: `/pages/payResult/paySuccess?phone=${this.detail.list.phone}&wx=${this.detail.list.wx}&total_fee=${this.detail.list.total_fee}`
						});
					},
					fail: err => {
						console.log(err, 'err');
						uni.navigateTo({
							url: `/pages/payResult/payFail?total_fee=${this.detail.list.total_fee}`
						});
					}
				});
			});
		},
		// 复制手机号
		copyPhone(phone, wx) {
			this.xWeinfo();
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			if (this.detail.if_pay == 2) {
				uni.setClipboardData({
					data: `手机号：${phone}; 微信号：${wx}`,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			} else {
				this.payWeddding();
			}
		},
		// 点击免费拿
		bindBack() {
			this.$emit('back');
		},
		// 联系客服点击率
		async chatClick() {
			const res = await chatClick({
				openid: app.globalData.openid
			});
		}
	}
};
</script>

<style scoped lang="scss">
.bottom {
	width: 100%;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	.send-input {
		width: 100%;
		height: 96rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		& > input {
			width: 100%;
			height: 100%;
			background: #f1f2f6;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
	.bottom-content {
		width: 100%;
		height: 96rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.b-left {
			display: flex;
			align-items: center;
			.r-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 48rpx;
				position: relative;
				.ke_fu_img {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
				}
				& > icon {
					width: 44rpx;
					height: 44rpx;
				}
				& > text {
					font-size: 20rpx;
					font-weight: 400;
					color: #171717;
					line-height: 14px;
					margin-top: 2rpx;
				}
				.text-like {
					color: #fa8384;
				}
				.icon-like {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-like.png) no-repeat;
					background-size: cover;
				}
				.icon-fx {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-fx.png) no-repeat;
					background-size: cover;
				}
				.icon-like-active {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-like-active.png) no-repeat;
					background-size: cover;
				}
				.icon-ly {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/detail-bottom-dly.png) no-repeat;
					background-size: cover;
				}
				.icon-kf {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-kefu-new.png) no-repeat;
					background-size: cover;
				}
				&:nth-last-of-type(1) {
					margin-right: 0;
				}
			}
		}
		.b-right {
			.buy-btn {
				width: 414rpx;
				height: 68rpx;
				background: #fa8384;
				border-radius: 12rpx;
				color: #ffffff;
				font-size: 28rpx;
				line-height: 68rpx;
				text-align: center;
			}
		}
		/* 
		<view class="b-right">
			<button class="buy-btn"></button>
		</view> 
		 */
	}
	.black {
		height: 68rpx;
	}
}
</style>
